﻿@model CTM.Web.Models.View.Note.ManagerNoteViewModel
@{
    ViewBag.Title = "Manager Notes";
}

<form class="form-inline" onsubmit="getNotes(event);">
    @if (ViewBag.CanAddNote != null)
    {
        <button class="btn btn-primary" type="button" data-toggle="modal" data-target=".modal-note">
            <span class="glyphicon glyphicon-plus"></span> Add Note
        </button>
    }

    <div class="pull-right">
        <div class="form-group">
            <div class="input-group year">
                <input type="text" class="form-control" name="Year" value="@Model.Year" onchange="$(this).closest('form').submit();" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
        <div class="form-group">
            <div class="input-group">
                <input type="text" class="form-control" name="Keyword" placeholder="Keyword" value="@Model.Keyword" />
                <div class="input-group-btn">
                    <button type="submit" class="btn btn-info">
                        <span class="glyphicon glyphicon-search"></span> Search
                    </button>
                </div>
            </div>
        </div>
    </div>
</form>

<div class="row note-result">
    @foreach (var note in Model.Notes)
    {
        <div class="col-xs-12 col-sm-6 col-md-4">
            <div class="modal" id="note_@note.Id">
                <div class="modal-dialog" style="width: 90%;">
                    <div class="modal-content">
                        <div class="modal-header">
                            <div class="modal-title">
                                <a class="close" href="@Url.Action("Delete", "Note", new { id = note.Id, type = "ManagerNote" })">
                                    <span class="glyphicon glyphicon-trash font-red"></span>
                                </a>
                                <button type="button" class="close pull-left" data-toggle="modal" data-target=".modal-note" data-note-id="@note.Id">
                                    <span class="glyphicon glyphicon-edit font-yellow"></span>
                                </button>
                                <div class="clearfix"></div>
                            </div>
                        </div>
                        <div class="modal-body">
                            <div class="row row-eq-height" style="vertical-align: middle;">
                                <div class="col-xs-12 col-sm-4 text-center">
                                    <img class="center-block img-circle img-thumbnail img-responsive" alt="@note.Manager.DisplayName" src="@note.Manager.Avatar" />
                                </div>
                                <div class="col-xs-12 col-sm-8">
                                    <div class="media-heading">@note.Manager.DisplayName</div>
                                    <p>@note.CreatedOn.ToString("dd-MMM-yyyy")</p>
                                </div>
                            </div>
                            <div class="text-justify note-description">@note.Description </div>
                            <p class="note-tags">
                                <input type="hidden" value="@string.Join(",", note.Tags.Select(t => t.Name))" />
                                @foreach (var tag in note.Tags)
                                {
                                    <span class="label label-default tags">@tag.Name</span>
                                }
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    }
</div>

<div id="modalManagerNote" class="modal fade modal-note" tabindex="-1" role="dialog" aria-labelledby="modalManagerNoteLabel">
    <div class="modal-dialog">
        <form class="modal-content" onsubmit="submitModal(event);">
            <div class="modal-header">
                <button aria-label="Close" data-dismiss="modal" class="close" type="button">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 id="modalManagerNoteLabel" class="modal-title">Manager Note</h4>
            </div>
            <div class="modal-body">
                @Html.AntiForgeryToken()
                <input type="hidden" id="NoteId" name="Id" />
                <input type="hidden" name="Category" value="ManagerNote" />

                <div class="form-group">
                    <label for="Description">Description</label>
                    <textarea id="NoteDescription" name="Description" class="form-control" rows="4"></textarea>
                </div>
                <div class="form-group">
                    <label for="Tags">Tags</label>
                    <input id="NoteTags" name="Tags" class="form-control" type="text" @*data-role="tagsinput"*@ />
                </div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary">Save</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </form>
    </div>
</div>

@section scripts {
    <script type="text/javascript">
        function getNotes(e) {
            var form = e.target;
            if (!form.elements.Year) {
                e.preventDefault();
                alert('Please select a year to view.');
            }
        }

        function submitModal(e) {
            e.preventDefault();
            var url = e.target.elements.Id.value === '' ? '@Url.Action("Create", "Note")' : '@Url.Action("Edit", "Note")'
            $.post(url, $(e.target).serialize(), function (result) {
                if (result.success) {
                    location.reload();
                } else {
                    alert(result.message);
                }
            });
        }

        // Necessary scripts for Bootstrap Tags Input
        var tags = new Bloodhound({
            datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            remote: {
                url: '@Url.Action("Tags", "Home")' + '?name=%QUERY',
                wildcard: '%QUERY',
                filter: function (list) {
                    return $.map(list, function (tag) {
                        return { name: tag };
                    });
                }
            }
        });
        tags.initialize();

        $('#NoteTags').tagsinput({
            typeaheadjs: {
                name: 'tags',
                displayKey: 'name',
                valueKey: 'name',
                source: tags.ttAdapter()
            }
        });

        // Reload modal info
        $('#modalManagerNote').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget); // Button that triggered the modal
            var id = button.data('note-id'); // Extract info from data-* attributes
            // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
            // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
            var modal = $(this);
            var note = $('#note_' + id);
            modal.find('.modal-body #NoteTags').tagsinput('removeAll');
            if (note.length === 0) {
                modal.find('.modal-body #NoteId').val('');
                modal.find('.modal-body #NoteDescription').val('');
            } else {
                modal.find('.modal-body #NoteId').val(id);
                modal.find('.modal-body #NoteDescription').val(note.find('.note-description').text());
                var tagInput = note.find('.note-tags input');
                var tags = tagInput.val().split(',');
                for (var i = 0; i < tags.length; i++) {
                    if (tags[i] !== '') {
                        modal.find('.modal-body #NoteTags').tagsinput('add', tags[i]);
                    }
                }
            }
        });
    </script>
}